<template>
    <div>
        <el-row v-for="(table,index) in tableList">
            <el-descriptions :title="table.name" :column="3" size="mini">
                <template slot="extra">
                    <vue-copy-to-clipboard :text="createSql" ref="copy">
                        <el-button @click="toCopy(index)"><i class="el-icon-document-copy"></i>复制</el-button>
                    </vue-copy-to-clipboard>
                </template>
                <el-descriptions-item label="表名">{{table.content.tableName}}</el-descriptions-item>

                <el-descriptions-item label="来源">
                    <el-tag size="mini">{{table.userId}}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="更新时间">{{table.updateTime}}</el-descriptions-item>
                <el-descriptions-item label="字段">
                    <el-row v-for="(field,index) in table.content.fieldList">
                        {{field.fieldName}}、
                    </el-row>
                </el-descriptions-item>
            </el-descriptions>
            <el-divider></el-divider>
        </el-row>
        <el-pagination
                background
                layout="prev, pager, next"
                @current-change="handleCurrentPageChange"
                :current-page="current"
                :page-size="pageSize"
                :total="total">
        </el-pagination>
    </div>
</template>

<script>
    import request from "../utils/request";
    import HomeView from "./HomeView";

    export default {
        name: "FieldView",
        data() {
            return {
                activeName: 1,
                tableList: [],
                createSql: '',
                current: 1,
                pageSize: 4,
                total: 10
            }
        },
        created() {
            this.getPage()

        },
        methods: {
            getPage() {
                request.get('table_info/list/page/' + this.current + "/" + this.pageSize).then(res => {
                    console.log(res)
                    this.tableList = res.data.records
                    this.current = res.data.current
                    this.pageSize = res.data.size
                    this.total = res.data.total
                    var arr = this.tableList
                    for (var i = 0; i < arr.length; i++) {
                        var content = JSON.parse(arr[i].content)
                        this.tableList[i].content = content
                        const date = new Date(this.tableList[i].updateTime)
                        const options = {
                            year: 'numeric',
                            month: 'long',
                            day: 'numeric',
                            hour: 'numeric',
                            minute: 'numeric',
                        };
                        this.tableList[i].updateTime = new Intl.DateTimeFormat("zh-CN",options).format(date)
                    }
                })
            },
            toCopy(i) {
                request.post('/sql/generate/schema', this.tableList[i].content).then(res => {
                    console.log(res)
                    this.createSql = res.data.createSql
                })
            },
            handleCurrentPageChange(currentPage) {
                this.current = currentPage;
                this.getPage();
            },
        }
    }
</script>